<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul{
            list-style:none;
        }
        .list li{
            float:left;
            /*CSS3的盒子模型*/
            box-sizing: border-box;
            width:300px;
            height:200px;
            margin-right: 10px;
            background-color: #ff8500;

            border:1px solid #000;

            /*溢出内容隐藏*/
            overflow: hidden;
        }
        .list li img{
            width:100%;
            height:100%;

            /*旋转中心点左下角*/
            transform-origin:left bottom;
            /*旋转九十度*/
            transform:rotate(90deg);
            transition: transform 3s;
        }
        .list li:hover img{
            transform:rotate(0deg);
        }

    </style>
</head>
<body>
<ul class="list">
    <li><img class="mv" src="/static/w2/images/1.jpg">
    </li>
    <li><img class="mv" src="/static/w2/images/1.jpg">
    </li>
    <li><img class="mv" src="/static/w2/images/1.jpg">
    </li>
    <li><img class="mv" src="/static/w2/images/1.jpg">
    </li>


</ul>

</body>
</html>